import Vue from "vue";
import { haveSame, haveSameAnd } from "./../utils/Tool";

//全局指令，页面中按钮，跳转链接,添加组件的禁止

/* 
  这里id必须要唯一！！！
  在table组件中，url,index,key,id都是必填项
*/
/* table中操作列的按钮、文字连接进入下一页的禁止，在页面中需要url、index、key，id
      当一列3个，即操作一列三个
      1、在data中定义hideActionArr
      2、v-if="permissionData.hideActionArr.length < 3"
     3、再在按钮上加指令  v-permissions="{
                  url: 'device/update',
                  index: scope.$index,
                  key: 'hideAction',
                  id: 'update'
                }"
                id是唯一的
      当一列2个，有票无票url
      1、在data中定义hideURLArr
      2、v-if="permissionData.hideURLArr.length < 2"
      3、在按钮上加指令 v-permissions="{
                    url: 'device/stream/live/url/ticket/no',
                    index: scope.$index,
                    key: 'hideURL',
                    id: 'wupiao'
                  }"

       当一列只有1个
       1、在data中定义了hideFlowArr
      2、  v-if="permissionData.hideFlowArr.length < 1"
      3、在按钮上加指令 v-permissions="{
                  url: 'device/stream/limit/list',
                  index: scope.$index,
                  key: 'hideFlow',
                  id: 'xifen'
                }"
       */
Vue.directive("permissions", {
  bind: function(el, binding, vnode) {
    let permissions =
      localStorage.getItem("permissions") !== null
        ? JSON.parse(localStorage.getItem("permissions"))
        : [];
    let urlValue = !binding.value.url ? "" : binding.value.url; // {Array} 校验的api 【table内部使用，必填，table内外部必填】
    let display = !binding.value.hasDisplay ? false : binding.value.hasDisplay; // {Boolean} true false 用于是否启用外部判断，table内部不需要传 【table内部使用，必填，table内部非必填，外部必填】
    let id = binding.value.id; // {any} id 保证唯一性 【table内部使用，必填，table外部非必填】
    let index = binding.value.index; // {Number} index 下标 【table内部使用，必填，table外部非必填】
    let key = binding.value.key; // {String} key 每一组值，直白点每一列key都一样，id必须保持唯一性 【table内部使用，必填，table外部非必填】
    let arr = !key ? [] : vnode.context.permissionData[key + "Arr"]; // {Array} 用于存入没有权限的id  【table内部使用】
    let relation = binding.value.relation;
    let flag = false;

    if (!urlValue) {
      return;
    }

    if (Array.isArray(permissions) && permissions.length > 0) {
      //haveSame代表满足数组一个条件，haveSameAnd数组所有条件都满足
      if (!relation || relation == "or") {
        //console.log(urlValue, permissions);
        flag = haveSame(urlValue, permissions);
        //console.log(flag);
      } else if (relation == "and") {
        // console.log("and");
        flag = haveSameAnd(urlValue, permissions);
      }

      if (!display && !flag) {
        el.style.display = "none";
        if (index == 0 && typeof key != "undefined" && Array.isArray(arr)) {
          arr.push(JSON.stringify({ id: id }));
          arr = Array.from(new Set(arr));
          vnode.context.permissionData[key + "Arr"] = arr;
        }
      } else if (display && !flag) {
        //页面中添加组件的隐藏，在页面中需要url、display两个属性
        el.style.display = "none";
      }
    }
  }
});

/* else if (disable) {
  //table中某些元素禁止，在页面中只有url和disable两个属性（包括文字，按钮等元素，比如无票有票url）
  if (!urlValue) {
    return;
  } else {
    if (!permissions.includes(urlValue)) {
      var id = Math.floor(Math.random() * 100000);
      el.setAttribute("id", "disable" + id);
      el.style.color = "#666";
      el.style.pointerEvents = "none"; //css 禁止属性
      //这是通过parent，来设置title
      setTimeout(() => {
        var parent = document.getElementById("disable" + id).parentNode;
        if (!parent) {
          return;
        }
        parent.style.cursor = "not-allowed"; //css 小手禁止
        parent.setAttribute("title", "暂无权限");
      }, 0);
    }
  }
} */
